iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

用vue.js寫出一個實用的科內分享網站系列 第 9

Day9傑森史塔森#vue.js資料庫使用json server

  • 分享至 

  • xImage
  •  

延續昨天
今天要來做註冊頁
把註冊的按鈕給加了上去
以下是目前頁面
https://ithelp.ithome.com.tw/upload/images/20210921/20141007fusj5FRjU8.png

那我們就開始搞註冊頁吧!
跟day8的流程一樣就不多贅述了
總之我新增了一個register.vue
然後把所登入的程式碼直接複製貼上^^
既然是註冊那就新增個email跟姓名好了
https://ithelp.ithome.com.tw/upload/images/20210921/20141007ixxWenNHS6.png

再來把2個btn改個顏色跟內容!https://ithelp.ithome.com.tw/upload/images/20210921/20141007R7AGEnrsoj.png

以下是程式碼(記得在data裡面新增username useremail接值https://ithelp.ithome.com.tw/upload/images/20210921/20141007aFmRqHYqEm.png
其實跟login差不多 我新增了v-divider讓整題排版變好看
https://ithelp.ithome.com.tw/upload/images/20210921/20141007i8MmfKztU9.png

然後如果有帳號的話點選我已有帳號跳轉到Login頁面
再來就是要研究一下怎麼註冊了!
首先我需要一個資料庫
許多人推薦使用firebase資料庫 但是我這個網站之後可能會連到公司的資料庫所以我選擇使用json serve 簡單來說就是在本地創一個假的api讓我能夠連上
(官網https://www.npmjs.com/package/json-server)
首先按照官網的操作
npm install -g json-server
再來就是創一個db.json(在資料夾底下和src同一個階層)
https://ithelp.ithome.com.tw/upload/images/20210921/20141007OMfwWnjS2S.png

再來去終端機下這行指令json-server --watch db.json
就可以看到以下

{^_^}/ hi!

Loading db.json
Done

Resources
http://localhost:3000/users

Home
http://localhost:3000

點進去後可以看到剛剛創的資料
https://ithelp.ithome.com.tw/upload/images/20210921/20141007xrMrv5eErF.png

最後用postman測試看看這個api
嘟嘟嚕大功告成
https://ithelp.ithome.com.tw/upload/images/20210921/2014100770hxtEcy7Z.png
明天就從怎麼登入開始好了!
我們明天見!


上一篇
Day8燈燈燈燈登入
下一篇
Day10你敢不敢給我登入
系列文
用vue.js寫出一個實用的科內分享網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言